<template>
  <div class="layout-wrapper">
    <Layout class="layout-outer">
      <Sider collapsible v-model="isCollapsed" breakpoint="sm">
        <SideMenu :list="routers" :isCollapsed="isCollapsed">
          <div slot="title">Title</div>
        </SideMenu>
      </Sider>
      <Layout>
        <Header class="header-wrapper">
          <Icon :class="triggerClasses" @click.native="handleCollapsibled" type="md-menu" :size="32"/>
        </Header>
        <Content>
          <div>
            <Tabs :animated="false">
              <TabPane label="One">One</TabPane>
              <TabPane label="Two">Two</TabPane>
              <TabPane label="Three">Three</TabPane>
            </Tabs>
          </div>
          <router-view/>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<script>
// 基于iview的Layout组件，Menu组件，Dropdown组件，Tooltip组件，利用递归组件思想
// 功能：响应式布局，实现可收缩多级菜单，根据数据自动生成多级菜单

import SideMenu from '../components/side-menu'
import { mapState } from 'vuex'
export default {
  name: 'menu_page',
  data () {
      return {
          isCollapsed: false
      }
  },
  computed: {
    ...mapState({
      routers: state => state.router.routers.filter(item => {
        return item.path !== '*' && item.name !== 'login'
      })
    }),
    triggerClasses () {
      return [
        'trigger-icon',
        this.isCollapsed ? 'rotate' : ''
      ]
    }
  },
  methods: {
    handleCollapsibled () {
      this.isCollapsed = !this.isCollapsed
    }
  },
  components: {
    SideMenu
  }
}
</script>

<style lang="stylus">
.layout-wrapper, .layout-outer
    height 100%
    .header-wrapper
      padding 0 23px
      background #fff
      box-shadow 0 1px 1px 1px rgba(0, 0, 0, .1)
      .trigger-icon
        cursor pointer
        &.rotate
          transform rotateZ(-90deg)
          transition transform .3s ease
</style>
